<script lang="ts" setup>
import { ECOption, useEcharts } from "@/hooks/useEcharts";
import { computed, onMounted, PropType, ref, watch } from "vue";
import { electronCountData, ICaseNumberListItem } from "@/api/newIndex";
import { isNull, isUndefined } from "lodash-es";

const props = defineProps({
  data: {
    type: Object as PropType<electronCountData>,
    default: () => {
      return {
        caseNumberList: [],
        inProcessCaseNumber: []
      }
    }
  }
})
const delZeroReg = /^0+/;
const caseNumberList = computed(() => {
  const Arr = ref(Array.from({ length: 12 }, (v, k) => {
    return {
      // month:k+1<10?`0${k+1}`:`${k+1}`,
      month: k + 1 < 10 ? `0${k + 1}` : `${k + 1}`,
      endCaseNumber: 0,
      inProcessCaseNumber: 0,
      newCaseNumber: 0,
      sendPeriod: 0,
      settlementRatio: 0
    } as ICaseNumberListItem
  }));
  props.data.caseNumberList?.forEach((item) => {
    const month = Number(item.month.replace(delZeroReg, ''))-1;
    Arr.value[month] = item
    Arr.value[month].settlementRatio = isNull(item.settlementRatio) ? 0 : item.settlementRatio
  })
  console.log(Arr.value, 'Arr.value')
  return Arr.value
})
const getCaseNumberList = (key: keyof ICaseNumberListItem) => {
  return computed(() => {
    return caseNumberList.value.map((item) => {
      return Number(item[key])
    })
  })
}
const inProcessCaseNumber = computed(() => {
  return props.data?.inProcessCaseNumber
})
// 平均送达周期
const sendPeriod = computed(() => {
  return inProcessCaseNumber.value?.map((item) => {
    return item.number
  })
})
const defaultStyle = (color: string = "#fff") => {
  return {
    color: color,
    fontSize: 14,
  };
};
const defaultAxisLabel = (color: string = "#4BA0DD") => {
  return {
    color: color,
    fontSize: 14,
    fontWeight: 400,
  };
};
const randomNumber = (min: number, max: number) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};
// 柱形 在办 新收 完成
const ColumnarOptions = (color: string = "#4BA0DD", name: string, key: keyof ICaseNumberListItem, index: number) => {
  const options: ECOption["series"] = {
    color: color,
    name: name,
    type: "bar",
    xAxisIndex: 0,
    yAxisIndex: 0,
    barWidth: 8,
    data: getCaseNumberList(key).value,
    itemStyle: {
      borderRadius: [10, 10, 0, 0],
    },
    tooltip: {},
    barGap: index === 0 ? "0%" : "-100%",
    zlevel: 100 - index,
  };
  return options;
};
// 在办
const InProcess=(color: string = "#4BA0DD", name: string, key: keyof ICaseNumberListItem, index: number)=>{
  const options: ECOption["series"] = {
    color: color,
    name: name,
    type: "bar",
    xAxisIndex: 0,
    yAxisIndex: 0,
    barWidth: 8,
    data:sendPeriod.value,
    itemStyle: {
      borderRadius: [10, 10, 0, 0],
    },
    tooltip: {},
    barGap: index === 0 ? "0%" : "-100%",
    zlevel: 100 - index,
  };
  return options;
}
//    线形图
const lineOptions = computed<ECOption>(() => {
  const options: ECOption = {
    // 悬浮提示框
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      backgroundColor: "#000716",
      borderColor: "#4BBAF4",
      borderWidth: 1,
      textStyle: {
        color: "#fff",
      },
      formatter: (params: any) => {
        // console.log(params);
        let str = "";
        params.forEach((item: any) => {
          str += `<div style="display: flex; align-items: center; justify-content: space-between; ">
                                        <span style="color:#ffffff;margin-right: 10px">${item.seriesName}</span>
                                        <span style="color:${item.color}">${item.value}${item.seriesName === "收结比" ? "%" : ""}${item.seriesName === "平均送达周期" ? "天" : ""
            }</span>
                                    </div>`;
        });
        return str;
      },
    },
    // 图例
    legend: {
      type: "plain",
      icon: "circle",
      left: "center",
      textStyle: {
        ...defaultStyle(),
      },
      data: ["在办", "新收", "完成", "收结比", "平均送达周期"],
      backgroundColor: "transparent",
      itemGap: 10,
      itemWidth: 10,
    },
    // 整体大小
    grid: [
      {
        top: "22%",
        left: "12%",
        right: "12%",
        bottom: "50%",
        containLabel: false,
        id: "grid1",
      },
      {
        top: "50%",
        left: "12%",
        right: "12%",
        bottom: "10%",
        containLabel: false,
        id: "grid2",
      },
    ],
    xAxis: [
      {
        type: "category",
        // 从0开始
        boundaryGap: true,
        // 坐标轴刻度标签的相关设置。
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        axisLabel: {
          rotate: 45,
          ...defaultAxisLabel(),
        },
        offset: 8,
        gridId: "grid1",
        axisTick: {
          show: false,
        },
      },
      {
        type: "category",
        // 从0开始
        boundaryGap: true,
        // 坐标轴刻度标签的相关设置。
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        axisLabel: {
          show: false,
        },
        offset: 16,
        gridId: "grid2",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      //第一条Y轴
      {
        id: "y1",
        name: "案件数/件",
        nameTextStyle: {
          ...defaultStyle(),
        },
        type: "value",
        axisLabel: {
          ...defaultAxisLabel(),
        },
        splitNumber: 3,
        min: 0,
        gridId: "grid1",
        splitLine: {
          show: false,
        },
      },
      //第二条Y轴,右侧 0 20 40 60 80 100
      {
        id: "y2",
        name: "收结比/%",
        nameTextStyle: {
          ...defaultStyle(),
        },
        axisLabel: {
          ...defaultAxisLabel(),
        },
        splitLine: {
          show: false,
        },
        type: "value",
        // min: 0,
        // max: 100,
        // interval: 20,
        splitNumber: 4,
        min: 0,
        gridId: "grid1",
      },
      //第三条Y轴,下侧 0 10 20 30
      {
        name: "平均送达周期/天",
        nameTextStyle: {
          ...defaultStyle(),
        },
        axisLabel: {
          ...defaultAxisLabel(),
        },
        //    负轴
        inverse: true,
        splitLine: {
          show: false,
        },
        type: "value",
        splitNumber:3,
        gridId: "grid2",
      },
    ],
    series: [
      ColumnarOptions("#FDCA15", "完成", 'endCaseNumber', 0),
      ColumnarOptions("#32BCD2", "新收", 'newCaseNumber', 1),
      InProcess("#1F74E2", "在办", 'sendPeriod', 2),
      {
        name: "收结比",
        type: "line",
        yAxisId: "y2",
        xAxisIndex: 0,
        // yAxisIndex: 0,
        data: getCaseNumberList('settlementRatio').value,
        symbol: "circle",
        symbolSize: 6,
        itemStyle: {
          color: "#F57623",
        },
        zlevel: 200,
      },
      // {
      //   name: "完成率",
      //   type: "line",
      //   xAxisIndex: 0,
      //   yAxisIndex: 1,
      //   data: Array.from({ length: 12 }, () => randomNumber(0, 100)),
      //   symbol: "circle",
      //   symbolSize: 6,
      //   itemStyle: {
      //     color: "#CE5A60",
      //   },
      //   tooltip: {
      //     valueFormatter: (value: any): any => {
      //       return `${value}%`;
      //     },
      //   },
      //   zlevel: 201,
      // },
      {
        name: "平均送达周期",
        type: "line",
        xAxisIndex: 1,
        yAxisIndex: 2,
        data: getCaseNumberList('sendPeriod').value,
        symbol: "circle",
        symbolSize: 6,
        tooltip: {
          valueFormatter: (value: any): any => {
            return `${value}周`;
          },
        },
        itemStyle: {
          color: "#1BC85E",
        },
      },
    ],
  };
  return options;
});
const { domRef: lineRef } = useEcharts(lineOptions);
onMounted(() => {
  console.log('线性图')
})
</script>
<template>
  <div ref="lineRef" style="width: 100%;height: 100%" />
</template>
